<script setup lang="ts">
    import { reactive, ref } from 'vue' //导入vue相关函数
    import type { FormInstance } from 'element-plus' //导入表单实例类型
    import { ElMessage } from 'element-plus' //导入消息框
    import { useRouter } from "vue-router" //导入路由useRouter函数
    import { login } from '@/api' //导入axios接口
    import { useToken } from '@/stores/token' //导入token状态文件
    import { useAdmin } from '@/stores/admin' //导入admin状态文件

    //执行方法获得tokenStore对象
    const tokenStore = useToken()
    //执行方法获得adminStore对象
    const adminStore = useAdmin()

    //获得路由实例
    const router = useRouter();

    //定义表单数据对象
    const user = reactive({
        username: "hanys",
        password: "111111"
    })

    //定义表单对象实例的引用
    const formRef = ref<FormInstance>()

    //定义表单验证规则
    const rules = reactive({
        username:[
            { required:true, message:"用户名不能为空", trigger:"blur"}
        ],
        password:[
            { required:true, message:"密码不能为空", trigger:"blur"},
            { min:6, max:24, message:"密码长度为6~24个字符", trigger:"blur"}
        ]
    })

    //表单提交
    const checkLogin = async ()=>{
        await formRef.value?.validate(async (valid, _fields)=>{
            if(valid){
                //登录验证
                const res = await login(user)
                //判断登录状态
                if(res.data.errno == 0){
                    //更新token状态
                    tokenStore.updateToken(res.data.data.token)
                    //更新用户状态
                    await adminStore.updateAdmin()
                    //登录成功
                    ElMessage({type:"success", message:res.data.errmsg})
                    //进入后台首页
                    router.push("/")
                }
                else{
                    //登录失败
                    ElMessage({type:"error", message:res.data.errmsg})
                }
            }
        })
    }

    //表单重置
    function resetForm(){
        user.username = ""
        user.password = ""
    }
</script>

<template>
    <section>
        <!--Logo-->
        <header><img src="@/assets/images/EasyGo_Logo.png"></header>

        <!--登录表单-->
        <section class="content">
            <div>
                <div>管理员登录</div>
                <div>
                    <el-form ref="formRef" :model="user" :rules="rules"  label-width="80px" label-position="right" status-icon>
                        <el-form-item label="登录名称" prop="username">
                            <el-input v-model="user.username" />
                        </el-form-item>
                        <el-form-item label="登录密码" prop="password">
                            <el-input v-model="user.password" type="password" />
                        </el-form-item>
                        <el-form-item label-width="120px">
                            <el-button type="primary" @click="checkLogin">登录</el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </section>
    </section>
</template>

<style scoped>
    section{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
    }
    header{
        width:1000px;
        margin:0px auto;
    }
    header img{
        width:130px;
        height:80px;
    }
    .content{
        width:100%;
        min-width:1000px;
        background: url("@/assets/images/Login_Backgroud.jpg") no-repeat center/cover;
        position: relative;
    }
    .content > div{
        width:400px;
        background:#FFFFFF;
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-10%,-60%);
    }
    .content > div > div:first-child{
        font-size:20px;
        text-align:center;
        line-height:70px;
        border-bottom:1px solid #EDF0F0;
    }
    section > div > div:last-child{
        padding:20px 20px 0px 20px;
    }
</style>
